<template>
  <el-row>
    <el-col :span="12" style="overflow: hidden;border: 1px solid #d1d3d7;padding-left: 10px; padding-right: 10px;">
      <canvas id="canvas" ref="canvas" width="1240" height="800">
        <p>{{ $t('您的浏览器不支持canvas') }}</p>
      </canvas>
    </el-col>
  </el-row>
</template>

<script>
import { fabric } from 'fabric'
export default {
  name: 'CanvasDemo',
  props: {
    base64: {
      type: String,
      default: ''
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      canvas: {},
      image: undefined,
      group: undefined
    }
  },
  mounted() {
    this.supportCanvas()
  },
  methods: {
    supportCanvas() {
      if (this.$refs.canvas.getContext) {
        console.log('你的浏览器支持Canvas!')
        this.load()
      } else {
        console.log('你的浏览器不支持Canvas!')
      }
    },
    load() {
      const ref = this.$refs.canvas
      this.canvas = new fabric.Canvas(ref, { preserveObjectStacking: true, selection: false })
      const canvas = this.canvas
      // fabric.Image.fromURL(this.base64, (oImg) => {
      //   oImg.hasControls = false
      //   // canvas.add(oImg)
      //   // canvas.centerObject(oImg)
      //   // canvas.setActiveObject(oImg)
      //   // canvas.renderAll()
      //   canvas.sendToBack(oImg)
      //   this.group = new fabric.Group([oImg], {
      //     hasControls: false
      //   })
      //   canvas.add(oImg)
      //   canvas.add(this.group)
      // })

      // 771,448,917,448,917,471,771,471
      // 162,443,312,443,312,471,162,471
      // const aCoords = {
      //   tl: new fabric.Point(162, 443),
      //   tr: new fabric.Point(312, 443),
      //   br: new fabric.Point(312, 471),
      //   bl: new fabric.Point(162, 471)
      // }

      // const rect = new fabric.Rect({
      //   left: aCoords.tl.lerp(aCoords.br).x,
      //   top: aCoords.tl.lerp(aCoords.br).y,
      //   width: (new fabric.Point(aCoords.tl.x, aCoords.tl.y).distanceFrom(aCoords.tr)),
      //   height: (new fabric.Point(aCoords.tl.x, aCoords.tl.y).distanceFrom(aCoords.bl)),
      //   angle: fabric.util.radiansToDegrees(Math.atan2(aCoords.tr.y - aCoords.tl.y, aCoords.tr.x - aCoords.tl.x)),
      //   padding: 10,
      //   stroke: 'red',
      //   strokeWidth: 1,
      //   fill: 'rgba(0,0,0,0)'
      // })

      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 200,
        height: 50,
        padding: 10,
        stroke: 'red',
        strokeWidth: 1,
        fill: 'rgba(0,0,0,0)'
      })
      canvas.add(rect)
      rect.set({
        width: 150
      })

      canvas.on('mouse:wheel', function(opt) {
        const delta = opt.e.deltaY
        let zoom = canvas.getZoom()
        zoom *= 0.999 ** delta
        if (zoom > 20) zoom = 20
        if (zoom < 0.01) zoom = 0.01
        canvas.setZoom(zoom)
        opt.e.preventDefault()
        opt.e.stopPropagation()
      })

      // 监听点击事件
      canvas.on('mouse:down', function(event) {
        var pointer = canvas.getPointer(event.e)
        var posX = pointer.x
        var posY = pointer.y
        console.log(canvas.getObjects())
        console.log(posX + ', ' + posY)
      })
    },
    quadPosition(row, column) {
      console.log(row)
      console.log(column)
      let quadArray = []
      if (column.property === 'subjectName') {
        quadArray = row['subjectNameQuad'].split(',')
      } else if (column.property === 'amount1') {
        quadArray = row['amountQuad1'].split(',')
      } else if (column.property === 'amount2') {
        quadArray = row['amountQuad2'].split(',')
      } else {
        return
      }
      if (quadArray[0] === '0' && quadArray[1] === '0' && quadArray[2] === '0' && quadArray[3] === '0') {
        return
      }
      // const canvas = this.canvas
      const x1 = quadArray[0]
      const y1 = quadArray[1]
      const x2 = quadArray[2]
      const y2 = quadArray[3]
      const x3 = quadArray[4]
      const y3 = quadArray[5]
      const x4 = quadArray[6]
      const y4 = quadArray[7]
      // this.group.set = { 'left': x1, 'top': y1 }
      console.log(x1, y1, x2, y2)
      const aCoords = {
        tl: new fabric.Point(x1, y1),
        tr: new fabric.Point(x2, y2),
        br: new fabric.Point(x3, y3),
        bl: new fabric.Point(x4, y4)
      }

      this.group.addWithUpdate(new fabric.Rect({
        left: x1 - 50,
        top: y1 - 50,
        width: (new fabric.Point(aCoords.tl.x, aCoords.tl.y).distanceFrom(aCoords.tr)),
        height: (new fabric.Point(aCoords.tl.x, aCoords.tl.y).distanceFrom(aCoords.bl)),
        padding: 10,
        stroke: 'red',
        strokeWidth: 1,
        fill: 'rgba(0,0,0,0)'
      }))
      // this.group.item(1).set({
      //   left: y1,
      //   top: x1,
      //   width: (x2 - x1),
      //   height: (y2 - y1)
      // })
    }
  }
}
</script>

<style scoped>

</style>
